<template>
  <div class="distributor">
    <Loading :isLoading = "isLoading" />
    <div class="distributor-content">
      <div class="distributor-search">
        <a-select
          class="select-option"
          v-model:value="value"
          show-search
          placeholder="Select a city"
          :options="cityList"
          @focus="handleFocus"
          @change="handleChange"
        >
        </a-select>
      </div>
      <div class="distributor-list">
        <article class="display single-distributer" v-for="(item, index) in disList"  :key="item.id">
          <p id="0" class="company-name has-text-color has-black-color has-bold-weight"><img loading="lazy" :src="distriIcon" alt="" width="15" height="21" class="alignnone size-full wp-image-11491">{{ item.company }} </p>
          {{item.country}}
          <a :href="item.website">{{ item.website }}</a>
          <a :href="item.email">{{ item.email }}</a>
          <a class="phone" :href="item.telephone">{{item.telephone}}</a>
        </article>
      </div>
    </div>
  </div>
</template>

<script>
import  {ref, onMounted} from 'vue';
import {getDistributorCity, getDistributorList} from '../../api/contact'
import Loading from '../Loading.vue'
import disIcon from "../../assets/images/about/distributor.png"
export default {
  name: "DistributorCom",
  components:{Loading},
  setup(){
    const value = ref('');
    let disList = ref([])
    let cityList = ref([])
    let isLoading = ref(true)
    const distriIcon = disIcon
    onMounted(()=>{
      getDistributor("")
    })
    const handleFocus = () => {
      getCity("")
    }

    const handleChange = (e) => {
      getDistributor(e)
    };

    const getCity= (keyword) => {
      getDistributorCity(keyword).then((res) => {
        if (res && res.code === 200) {
          var options = []
          res.data.forEach((item) => {
            options.push({
              value: item.name,
              label: item.name,
            })
          })
          cityList.value = options
        }
      })
    }
    const getDistributor = (keyword) => {
      getDistributorList(keyword).then((res)=>{
        if(res && res.code === 200){
          disList.value = res.data.list
          isLoading.value = false
        }
      })
    }
    return {
      labelCol: {
        span: 12,
      },
      wrapperCol: {
        span: 24,
      },
      disList,
      getCity,
      getDistributor,
      value,
      cityList,
      isLoading,
      handleFocus,
      handleChange,
      distriIcon
    }
  }
}
</script>

<style scoped lang="scss">
.distributor{
  margin:30px auto;
  width:70vw;
  h3{
    font-size: 40px;
    line-height: 1.25;
    font-weight: 400;
    margin-bottom: 10px;
    border-bottom: 1px solid rgb(29, 29, 27);
  }
  .distributor-content{
    .distributor-search{
      margin:15px 0;
      .select-option{
        width:100%;
      }
    }
    .distributor-list{
      width:100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 15px;
      text-align: left;
      .display{
        img{
          margin-right:5px;
        }
        a{
          display:block;
          font-weight: 600;
          color: #ffb81c;
          text-decoration: none;
        }
        a.phone{
          color:#737373;
        }
      }
    }
  }
}
</style>
